<template>
  <!-- 客户调配及回收 -->
  <div class="recycle-search-container">
    <div class="recycle-search-title">
      <h1>贵宾客户分配</h1>
    </div>
    <div class="sponsor-list">
      <ui-button class="primary-btn mg-bt-20 buttonright" @click="choiceManager" icon="ui-icon-plus">选择客户经理</ui-button>
      <ui-button class="primary-btn mg-bt-20 buttonright" @click="addVipCustomer" icon="ui-icon-plus">添加</ui-button>
    </div>
    <div class="table-list">
      <vx-table :tableData="tableData" :customerStyle="true" :columns="columns">
        <template slot="operation" slot-scope="scope">
          <ui-link type="danger" :underline="false" @click="onDelete(scope)"> 删除</ui-link>
        </template>
      </vx-table>
    </div>
    <ui-row type="flex" class="row-bg" justify="center">
      <ui-button class="primary-btn mg-bt-20 buttonright" @click="backPrePage">返回</ui-button>
      <ui-button class="primary-btn mg-bt-20 buttonright" @click="submit">提交</ui-button>
    </ui-row>
    <!-- 添加客户经理 -->
    <ui-dialog :visible.sync="dialogshow" title="添加客户经理" width="30%">
      <ui-form v-model="addForm">
        <ui-form-item label="客户经理名称">
          <ui-select v-model="addForm.userName" placeholder="请选择客户经理名称">
            <ui-option :value="0" label="零售"></ui-option>
            <ui-option :value="1" label="公司"></ui-option>
          </ui-select>
        </ui-form-item>
        <!-- 这里可改成input 禁止输入  也可以携程select-->
        <ui-form-item label="客户经理所属机构">
          <ui-input type="text" placeholder="请输入客户经理所属机构" v-model="addForm.updatedBy"> </ui-input>
        </ui-form-item>
        <ui-form-item label="客户经理编号">
          <ui-input type="text" placeholder="客户经理编号" v-model="addForm.customerBy"> </ui-input>
        </ui-form-item>
      </ui-form>
      <span slot="footer" class="dialog-footer">
        <ui-button @click="dialogshow = false">取 消</ui-button>
        <ui-button type="primary" @click="dialogshow = false">确 定</ui-button>
      </span>
    </ui-dialog>
    <!-- 选择客户经理 -->
    <ui-dialog :visible.sync="managerDialog" title="主办人调配" width="50%">
      <div class="search-header">
        <div class="search-left">
          <h1>客户经理：</h1>
          <ui-input v-model="managerName" placeholder="请输入"></ui-input>
        </div>
        <div class="search-btns">
          <ui-button type="warning" plain @click="queryManager">查询</ui-button>
          <ui-button type="warning" plain @click="resetManager">重置</ui-button>
        </div>
      </div>
      <div class="holder-table-list">
        <vx-table :columns="managerColumns" :table-data="managerTableData" :is-select="true" @multipleSelection="multipleSelection"> </vx-table>
        <div class="page">
          <ui-pagination
            :total="managerTotal"
            :page-size="managerPageSize"
            :current-page="managerCurrentPage"
            :layout="layout"
            @current-change="handleCurrentChange"
          >
          </ui-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <ui-button type="primary" @click="goSponsorConfirm">确 定</ui-button>
        <ui-button @click="managerDialog = false">取 消</ui-button>
      </span>
    </ui-dialog>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
export default {
  components: {
    vxTable,
  },
  data() {
    return {
      managerDialog: false,
      searchForm: {},
      managerName: '',
      managerTotal: 100,
      managerPageSize: 10,
      managerCurrentPage: 1,
      layout: 'total, prev, pager, next, jumper', // 分页顺序
      dialogshow: false,
      addForm: {},
      managerTableData: [{ userName: 1, updatedBy: '1', customerBy: '1' }],
      tableData: [{ customerNo1: 1, customerNo2: '1', customerNo3: '1' }],
      columns: [
        { prop: 'customerNo1', label: '客户经理名称', fixed: true },
        { prop: 'customerNo2', label: '客户经理所属机构', fixed: true },
        { prop: 'customerNo3', label: '客户经理编号', fixed: true },
      ],
      managerColumns: [
        {
          prop: 'userName',
          label: '客户经理',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户经理编号',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '所属机构',
          fixed: true,
        },
      ],
    };
  },
  methods: {
    // 协办人调配
    onDelete(scope) {},
    //选择客户经理
    choiceManager() {
      this.managerDialog = true;
    },
    // 跳转主办人调配页面
    goSponsorConfirm() {
      this.$router.push({ path: '/customerdivision/recycle/sponsorconfirm' });
      this.managerDialog = false;
    },
    // 返回
    backPrePage() {},
    // 提交
    submit() {
      // 贵宾客户分配确认页
      this.$router.push({ path: '/customerdivision/vipCustomers/vipCustomersConfirm' });
    },
    // 添加贵宾客户
    addVipCustomer() {
      this.dialogshow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.recycle-search-container {
  .recycle-search-title,
  .sponsor-list {
    overflow: hidden;
    h1,
    span {
      font-size: 20px;
      margin-bottom: 20px;
    }
  }
  .sponsor-list {
    margin-top: 20px;
    span {
      font-weight: 600;
    }
  }
  .table-list {
    margin-bottom: 20px;
  }
  .search-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search-left {
      h1 {
        width: 105px;
        font-size: 16px;
      }
      display: flex;
      align-items: center;
      width: 50%;
    }
  }
}
::v-deep .ui-form-item__content {
  height: 40px;
}
::v-deep .ui-form-item--small.ui-form-item {
  margin-bottom: 48px;
}
.buttonright {
  float: right;
  margin-right: 20px;
}
</style>
